<template>
    <div>
        <div class="operateBtn">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">保存</el-button>
        </div>

        <el-row :gutter="20">
            <el-col :span="24">
                <div class="cardBox">
                    <div class="title">
                        <div>基础信息</div>
                    </div>
                    <avue-form ref="baseForm" :option="baseOption" v-model="form">
                        <template slot-scope="{disabled,size}" slot="picture">
                            <div class="block" style="width: 150px;">
                                <el-image :src="form.picture" style="width: 150px;height:150px;">
                                    <div slot="error" class="image-slot"
                                        style="background: rgb(245, 247, 250); width: 100%;height: 100%;padding-top: 50px;box-sizing: border-box;overflow: hidden;color: #666;text-align: center;">
                                        <i class="el-icon-plus"></i>
                                        <div>点击上传头像</div>
                                    </div>
                                </el-image>
                                <div></div>
                                <input class="imgBtn" type="file" accept="image/*" @change="handleFileChange">
                            </div>

                        </template>
                    </avue-form>
                </div>
            </el-col>

        </el-row>


        <div class="cardBox">
            <div class="title">
                <div>角色</div>
            </div>
            <div class="" style="padding: 20px;box-sizing: border-box;">
                <avue-checkbox :props="{label: 'moniker',value: 'id'}" v-model="roleIds" placeholder="请选择内容"
                    :dic="roleDic"></avue-checkbox>

            </div>
        </div>

    </div>
</template>

<script>

    import { dicIdList } from "@/api/com";
    import { roleList, staff, staffPut } from "@/api/mgmt/sys/user";

    let url = process.env.VUE_APP_BASE_API;


    export default {
        props: {
            defaultFrom: {
                type: Object,
                required: {}
            },
            dialogType: {
                type: String,
                required: 'add'
            }

        },
        data() {
            return {
                form: {
                    picture: ''
                },
                baseOption: {
                    emptyBtn: false,
                    submitBtn: false,
                    column: [
                        {
                            label: "附件上传",
                            prop: "picture",
                            type: "upload",
                            listType: "picture-img",
                            multiple: true,
                            span: 24,
                            dataType: "string",
                            uploadBefore: (file, done, loading) => {

                                return file;
                            }
                        },
                        {
                            label: '姓名',
                            prop: 'moniker',
                            type: 'input',
                            rules: [
                                { required: true, trigger: "blur", message: "请输入姓名", },
                            ],
                        },
                        {
                            label: '性别',
                            prop: 'sex',
                            type: 'select',
                            rules: [
                                { required: true, trigger: "blur", message: "请选择性别", },
                            ],
                            props: {
                                label: 'snName',
                                value: 'snName'
                            },
                            dicUrl: url + 'dic/drop?dicIdList=56',
                            dicFormatter: (res) => {
                                return res.list[0]
                            },
                        }, {
                            label: '民族',
                            prop: 'nation',
                            type: 'select',
                            props: {
                                label: 'snName',
                                value: 'snName'
                            },
                            dicUrl: url + 'dic/drop?dicIdList=44',
                            dicFormatter: (res) => {
                                return res.list[0]
                            },
                        }, {
                            label: '出生日期',
                            prop: 'birthday',
                            type: 'date',
                            valueFormat: 'yyyy-MM-dd',
                            format: 'yyyy-MM-dd'
                        },  {
                            label: '所属机构',
                            type: 'select',
                            prop: 'clinicId',
                            rows: 5,
                            span: 12,
                            rules: [
                                { required: true, message: "请选择所属机构", trigger: "blur" },
                            ],
                            props: {
                                label: 'name',
                                value: 'id'
                            },
                            dicUrl: url + '/org/tree?searchType=1',
                            dicFormatter: (res) => {

                                res.list.shift();
                                // 按 type 字段分组
                                let data = res.list.reduce((acc, item) => {
                                    if (!acc[item.type]) {
                                    acc[item.type] = [];
                                    }
                                    acc[item.type].push(item);
                                    return acc;
                                }, {});
                                return data[1]
                            },
                        },{
                            label: '文化程度',
                            prop: 'education',
                            type: 'select',
                            props: {
                                label: 'snName',
                                value: 'snName'
                            },
                            dicUrl: url + '/dic/drop?dicIdList=32',
                            dicFormatter: (res) => {
                                return res.list[0]
                            },
                        }, {
                            label: '手机号码',
                            prop: 'phone',
                            span: 12,
                            rules: [
                                { required: true, message: "请输入手机号", trigger: "blur" },
                            ],


                        }, {
                            label: '身份证号',
                            prop: 'idCardNum',
                            span: 12,
                            rules: [
                                { required: true, message: "请输入身份证", trigger: "blur" },
                            ],
                        }, {
                            label: '电子邮箱',
                            prop: 'email',
                            span: 12,
                        }, {
                            label: '微信号',
                            prop: 'wx',
                            span: 12,
                        }, {
                            label: 'QQ号',
                            prop: 'qq',
                            span: 12,
                        }, {
                            label: '个人简介',
                            type: 'textarea',
                            prop:'selfIntroduce',
                            rows: 5,
                            span: 24,
                        },
                    ]
                },
                roleDic: [],
                roleIds: []

            }
        },
        mounted() {
            
            if (this.dialogType != 'add') {
                setTimeout(() => {
                    this.$set(this, 'form', this.defaultFrom.mgmtStaffEntity)
                    this.$set(this, 'roleIds', this.defaultFrom.roleIds?this.defaultFrom.roleIds:[])
                }, 50)
            }else{
                console.log(this.defaultFrom)
                this.form.clinicId = this.defaultFrom.mgmtStaffEntity.clinicId
            }

            this.dicIdListFun();
        },
        methods: {
            handleFileChange(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.form.picture = e.target.result; // 将结果设置为预览图片的URL
                    };
                    reader.readAsDataURL(file); // 读取文件内容为DataURL
                }
            },

            handleSubmit() {
                this.$refs.baseForm.validate((baseValid, baseDone, baseMsg) => {
                    if (baseValid) {
                        let newData = JSON.parse(JSON.stringify(this.form)) ;
                        newData.clinicId = String(newData.clinicId)
                        let data = {};
                        if (this.dialogType == 'add') {
                            data = {
                                mgmtStaffEntity: Object.assign(newData),
                                roleIds: this.roleIds?this.roleIds:[],//角色
                            }

                            staff(Object.assign(data)).then((res) => {
                                if (res.success) {
                                    this.$message({
                                        type: "success",
                                        message: "新增成功!"
                                    });
                                    this.$emit('handleClose', 'add');
                                }

                            })
                        } else {
                            data = {
                                mgmtStaffEntity: newData,
                                roleIds: this.roleIds?this.roleIds:[],
                            }

                            staffPut(Object.assign(data)).then((res) => {
                                if (res.success) {
                                    this.$message({
                                        type: "success",
                                        message: "修改成功!"
                                    });
                                    this.$emit('handleClose', 'edit');
                                }

                            })
                        }

                        baseDone();
                    }
                })
            },
            handleClose() {
                // this.$refs.baseForm.resetForm();
                this.form.pictur = ''
                this.$emit('handleClose')
            },

            rowPracticingDel(row, index) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {


                        if (this.dialogType == 'add') {
                            this.practicingData.splice(index, 1);
                            return;
                        } else {
                            return certificationDel(row.id);
                        }

                    })
                    .then(() => {
                        this.certificationList();
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });
                    });
            },
            rowPracticingUpdate(row, index, done, loading) {
                if (this.dialogType == 'add') {
                    Vue.set(this.practicingData, index, row);
                    this.$message({
                        type: "success",
                        message: "修改成功!"
                    });
                    done();
                } else {
                    certificationPut(row).then(() => {
                        this.$message({
                            type: "success",
                            message: "修改成功!"
                        });
                        this.certificationList();
                        done();
                    })

                }


            },
            rowPracticingSave(row, done, loading) {
                if (this.dialogType == 'add') {
                    this.practicingData.push(row);
                    this.$message({
                        type: "success",
                        message: "新增成功!"
                    });
                    done();
                } else {
                    row.staffId = this.form.id
                    certificationAdd(row).then(() => {
                        this.$message({
                            type: "success",
                            message: "新增成功!"
                        });
                        this.certificationList();
                        done();
                    })

                }


            },
            dicIdListFun() {
                roleList().then(res => {
                    this.roleDic = res.list;
                })

            }



        }

    }

</script>
<style scoped>
    .cardBox {
        border: 2px solid #e6e6e6;
        border-radius: 16px;
        padding: 16px;
        box-sizing: border-box;
        margin-bottom: 18px;
    }

    .operateBtn {
        position: absolute;
        margin-top: 20px;
        text-align: right;
        margin-bottom: 20px;
        right: 20px;
        top: 0;
    }

    .imgBtn {
        opacity: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        height: 100%;
        width: 100%
    }

    .image-slot {}
</style>